<template>
  <a-modal
    :title="isEdit ? '编辑' : '新增'"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :width="1200"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      labelAlign="left"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-row>
        <a-col :span="6">
          <a-form-model-item label="编号" :label-col="{ span: 8 }" :wrapper-col="{ span:14 }">
            <a-input v-model="formData.class_no" :disabled="true" />
          </a-form-model-item>
        </a-col>
        <a-col :span="18">
          <a-form-model-item label="班次名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" prop="class_name">
            <a-input v-model="formData.class_name" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="部门" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
            <a-tree-select
            v-model="formData.dep_id"
            :dropdown-style="{ maxHeight: '400px',  overflow: 'auto' }"
            placeholder="请选择部门"
            allow-clear
            :tree-default-expand-all="false"
            :treeData="departmentList"
            :replaceFields="{children:'childs', title:'dep_name', key:'pkey', value: 'pkey' }"
          >
          </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="备注" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
            <a-textarea v-model="formData.remark" :auto-size="{ minRows: 2, maxRows: 5 }" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="8">
          <a-card title="第一时间段(上午)">
            <a-form-model-item label="开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg1_begin_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg1_check_on" class="l-mg-l10">上班需打卡</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="上班时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg1_on_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg1_check_off" class="l-mg-l10">下班需打卡</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="下班时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg1_off_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg1_calc_late" class="l-mg-l10">计算迟到</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg1_end_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg1_calc_early" class="l-mg-l10">计算早退</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="工时(分)" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-input-number v-model="formData.seg1_time_len" :min="0" :max="999999999999" />
                <a-checkbox v-model="formData.seg1_calc_absent" class="l-mg-l10">计算缺勤</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="班次类别" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-select v-model="formData.seg1_type">
                <a-select-option v-for="(item) in  classTypeList" :key="item.pkey" :value="item.pkey">{{item.type_name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-row>
              <a-col :span="6"></a-col>
              <a-col :span="18">
                <a-checkbox v-model="formData.seg1_enabled">是否启用此字段</a-checkbox>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="第二时间段(下午)">
            <a-form-model-item label="开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg2_begin_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg2_check_on" class="l-mg-l10">上班需打卡</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="上班时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg2_on_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg2_check_off" class="l-mg-l10">下班需打卡</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="下班时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg2_off_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg2_calc_late" class="l-mg-l10">计算迟到</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg2_end_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg2_calc_early" class="l-mg-l10">计算早退</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="工时(分)" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-input-number v-model="formData.seg2_time_len" :min="0" :max="999999999999" />
                <a-checkbox v-model="formData.seg2_calc_absent" class="l-mg-l10">计算缺勤</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="班次类别" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-select v-model="formData.seg2_type">
                <a-select-option v-for="(item) in  classTypeList" :key="item.pkey" :value="item.pkey">{{item.type_name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-row>
              <a-col :span="6"></a-col>
              <a-col :span="18">
                <a-checkbox v-model="formData.seg2_enabled">是否启用此字段</a-checkbox>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="第三时间段(晚班)">
            <a-form-model-item label="开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg3_begin_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg3_check_on" class="l-mg-l10">上班需打卡</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="上班时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg3_on_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg3_check_off" class="l-mg-l10">下班需打卡</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="下班时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg3_off_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg3_calc_late" class="l-mg-l10">计算迟到</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-time-picker v-model="formData.seg3_end_time" :default-open-value="moment('00:00:00', 'HH:mm:ss')" valueFormat="HH:mm:ss" />
                <a-checkbox v-model="formData.seg3_calc_early" class="l-mg-l10">计算早退</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="工时(分)" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <div class="l-f">
                <a-input-number v-model="formData.seg3_time_len" :min="0" :max="999999999999" />
                <a-checkbox v-model="formData.seg3_calc_absent" class="l-mg-l10">计算缺勤</a-checkbox>
              </div>
            </a-form-model-item>
            <a-form-model-item label="班次类别" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-select v-model="formData.seg3_type">
                <a-select-option v-for="(item) in  classTypeList" :key="item.pkey" :value="item.pkey">{{item.type_name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-row>
              <a-col :span="6"></a-col>
              <a-col :span="18">
                <a-checkbox v-model="formData.seg3_enabled">是否启用此字段</a-checkbox>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { editAttClassApi,getAttClassTypeSelectListApi,getAttClassDetailApi } from '@/api/attendance'
import { getDepartmentList } from '@/api/plan'
export default {
  data() {
    return {
      isEdit: false,
      visible: false,
      confirmLoading: false,
      pkey: null,
      formData: {
        class_no: null, // 编号
        class_name: '', // 班次名称
        dep_id: null, // 部门
        remark: '', // 备注
        // 第一时段
        seg1_begin_time: '', // 开始时间
        seg1_on_time: '', // 上班时间
        seg1_off_time: '', // 下班时间
        seg1_end_time: '', // 结束时间
        seg1_time_len: 0, // 工时(分)
        seg1_check_on: false, // 上班需打卡
        seg1_check_off: false, // 下班需打卡
        seg1_calc_late: false, // 计算迟到
        seg1_calc_early: false, // 计算早退
        seg1_calc_absent: false, // 计算缺勤
        seg1_type: '', // 班次类别
        seg1_enabled: false, // 是否启用此字段

        // 第二时段
        seg2_begin_time: '', // 开始时间
        seg2_on_time: '', // 上班时间
        seg2_off_time: '', // 下班时间
        seg2_end_time: '', // 结束时间
        seg2_time_len: 0, // 工时(分)
        seg2_check_on: false, // 上班需打卡
        seg2_check_off: false, // 下班需打卡
        seg2_calc_late: false, // 计算迟到
        seg2_calc_early: false, // 计算早退
        seg2_calc_absent: false, // 计算缺勤
        seg2_type: '', // 班次类别
        seg2_enabled: false, // 是否启用此字段

        // 第三时段
        seg3_begin_time: '', // 开始时间
        seg3_on_time: '', // 上班时间
        seg3_off_time: '', // 下班时间
        seg3_end_time: '', // 结束时间
        seg3_time_len: 0, // 工时(分)
        seg3_check_on: false, // 上班需打卡
        seg3_check_off: false, // 下班需打卡
        seg3_calc_late: false, // 计算迟到
        seg3_calc_early: false, // 计算早退
        seg3_calc_absent: false, // 计算缺勤
        seg3_type: '', // 班次类别
        seg3_enabled: false, // 是否启用此字段
      },
      rules: {
        class_name: [{ required: true, message: '请输入班次名称', trigger: 'change' }],
      },
      classTypeList: [], // 班次类别
      departmentList: [], // 部门列表
    }
  },
  watch: {
    'formData.seg1_on_time': function(val) {
      if(this.formData.seg1_on_time && this.formData.seg1_off_time) {
        let second = moment('2024-10-10 ' + this.formData.seg1_off_time).diff(moment('2024-10-10 ' + this.formData.seg1_on_time))
        this.formData.seg1_time_len = Math.floor(second/1000/60)
      }
    },
    'formData.seg1_off_time': function(val) {
      if(this.formData.seg1_on_time && this.formData.seg1_off_time) {
        let second = moment('2024-10-10 ' + this.formData.seg1_off_time).diff(moment('2024-10-10 ' + this.formData.seg1_on_time))
        this.formData.seg1_time_len = Math.floor(second/1000/60)
      }
    },
    'formData.seg2_on_time': function(val) {
      if(this.formData.seg2_on_time && this.formData.seg2_off_time) {
        let second = moment('2024-10-10 ' + this.formData.seg2_off_time).diff(moment('2024-10-10 ' + this.formData.seg2_on_time))
        this.formData.seg2_time_len = Math.floor(second/1000/60)
      }
    },
    'formData.seg2_off_time': function(val) {
      if(this.formData.seg2_on_time && this.formData.seg2_off_time) {
        let second = moment('2024-10-10 ' + this.formData.seg2_off_time).diff(moment('2024-10-10 ' + this.formData.seg2_on_time))
        this.formData.seg2_time_len = Math.floor(second/1000/60)
      }
    },
    'formData.seg3_on_time': function(val) {
      if(this.formData.seg3_on_time && this.formData.seg3_off_time) {
        let second = moment('2024-10-10 ' + this.formData.seg3_off_time).diff(moment('2024-10-10 ' + this.formData.seg3_on_time))
        this.formData.seg3_time_len = Math.floor(second/1000/60)
      }
    },
    'formData.seg3_off_time': function(val) {
      if(this.formData.seg3_on_time && this.formData.seg3_off_time) {
        let second = moment('2024-10-10 ' + this.formData.seg3_off_time).diff(moment('2024-10-10 ' + this.formData.seg3_on_time))
        this.formData.seg3_time_len = Math.floor(second/1000/60)
      }
    }
  },
  created() {
    this.getAttClassTypeSelectList()
    this.getDepartmentList()
  },
  methods: {
    moment,
    add(class_no) {
      this.isEdit = false
      this.visible = true
      this.pkey = null
      this.resetForm()
      this.formData.class_no = class_no
    },
    edit(row) {
      this.isEdit = true
      this.visible = true
      this.pkey = row.pkey
      this.resetForm()
      this.getAttClassDetail()
    },
    resetForm() {
      this.formData.class_name = ''
      this.formData.remark = ''
      if(this.departmentList.length > 0) {
        this.formData.dep_id = this.departmentList[0].pkey
      }
      // 第一时段
      this.formData.seg1_begin_time = ''
      this.formData.seg1_on_time = ''
      this.formData.seg1_off_time = ''
      this.formData.seg1_end_time = ''
      this.formData.seg1_time_len = 0
      this.formData.seg1_check_on = false
      this.formData.seg1_check_off = false
      this.formData.seg1_calc_late = false
      this.formData.seg1_calc_early = false
      this.formData.seg1_calc_absent = false
      this.formData.seg1_type = ''
      this.formData.seg1_enabled = false

      // 第二时段
      this.formData.seg2_begin_time = ''
      this.formData.seg2_on_time = ''
      this.formData.seg2_off_time = ''
      this.formData.seg2_end_time = ''
      this.formData.seg2_time_len = 0
      this.formData.seg2_check_on = false
      this.formData.seg2_check_off = false
      this.formData.seg2_calc_late = false
      this.formData.seg2_calc_early = false
      this.formData.seg2_calc_absent = false
      this.formData.seg2_type = ''
      this.formData.seg2_enabled = false

      // 第三时段
      this.formData.seg3_begin_time = ''
      this.formData.seg3_on_time = ''
      this.formData.seg3_off_time = ''
      this.formData.seg3_end_time = ''
      this.formData.seg3_time_len = 0
      this.formData.seg3_check_on = false
      this.formData.seg3_check_off = false
      this.formData.seg3_calc_late = false
      this.formData.seg3_calc_early = false
      this.formData.seg3_calc_absent = false
      this.formData.seg3_type = ''
      this.formData.seg3_enabled = false

      // 默认选择第一个
      if(this.classTypeList.length > 0) {
        this.formData.seg1_type = this.classTypeList[0].pkey
        this.formData.seg2_type = this.classTypeList[0].pkey
        this.formData.seg3_type = this.classTypeList[0].pkey
      }
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true

          // 处理数据
          let formObj = { ...this.formData}
          formObj.seg1_check_on = formObj.seg1_check_on === true ? 1 : 0
          formObj.seg1_check_off = formObj.seg1_check_off === true ? 1 : 0
          formObj.seg1_calc_late = formObj.seg1_calc_late === true ? 1 : 0
          formObj.seg1_calc_early = formObj.seg1_calc_early === true ? 1 : 0
          formObj.seg1_enabled = formObj.seg1_enabled === true ? 1 : 0
          formObj.seg1_calc_absent = formObj.seg1_calc_absent === true ? 1 : 0
          
          formObj.seg2_check_on = formObj.seg2_check_on === true ? 1 : 0
          formObj.seg2_check_off = formObj.seg2_check_off === true ? 1 : 0
          formObj.seg2_calc_late = formObj.seg2_calc_late === true ? 1 : 0
          formObj.seg2_calc_early = formObj.seg2_calc_early === true ? 1 : 0
          formObj.seg2_enabled = formObj.seg2_enabled === true ? 1 : 0
          formObj.seg2_calc_absent = formObj.seg2_calc_absent === true ? 1 : 0

          formObj.seg3_check_on = formObj.seg3_check_on === true ? 1 : 0
          formObj.seg3_check_off = formObj.seg3_check_off === true ? 1 : 0
          formObj.seg3_calc_late = formObj.seg3_calc_late === true ? 1 : 0
          formObj.seg3_calc_early = formObj.seg3_calc_early === true ? 1 : 0
          formObj.seg3_enabled = formObj.seg3_enabled === true ? 1 : 0
          formObj.seg3_calc_absent = formObj.seg3_calc_absent === true ? 1 : 0
          if (this.isEdit) {
            formObj.pkey = this.pkey
          }else {
            delete formObj.pkey
          }
          const { statusCode, errors } = await editAttClassApi(formObj)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('保存成功！')
            this.$emit('saveSuccess')
            this.resetForm()
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 获取详情
    async getAttClassDetail() {
      const { data } = await getAttClassDetailApi({
        pkey: this.pkey
      })
      let formObj = { ...data}
        formObj.seg1_check_on = formObj.seg1_check_on === 1 ? true : false
        formObj.seg1_check_off = formObj.seg1_check_off === 1 ? true : false
        formObj.seg1_calc_late = formObj.seg1_calc_late === 1 ? true : false
        formObj.seg1_calc_early = formObj.seg1_calc_early === 1 ? true : false
        formObj.seg1_enabled = formObj.seg1_enabled === 1 ? true : false
        formObj.seg1_calc_absent = formObj.seg1_calc_absent === 1 ? true : false
        
        formObj.seg2_check_on = formObj.seg2_check_on === 1 ? true : false
        formObj.seg2_check_off = formObj.seg2_check_off === 1 ? true : false
        formObj.seg2_calc_late = formObj.seg2_calc_late === 1 ? true : false
        formObj.seg2_calc_early = formObj.seg2_calc_early === 1 ? true : false
        formObj.seg2_enabled = formObj.seg2_enabled === 1 ? true : false
        formObj.seg2_calc_absent = formObj.seg2_calc_absent === 1 ? true : false

        formObj.seg3_check_on = formObj.seg3_check_on === 1 ? true : false
        formObj.seg3_check_off = formObj.seg3_check_off === 1 ? true : false
        formObj.seg3_calc_late = formObj.seg3_calc_late === 1 ? true : false
        formObj.seg3_calc_early = formObj.seg3_calc_early === 1 ? true : false
        formObj.seg3_enabled = formObj.seg3_enabled === 1 ? true : false
        formObj.seg3_calc_absent = formObj.seg3_calc_absent === 1 ? true : false
        delete formObj.pkey
        this.formData = formObj
    },
    // 获取班次类别
    async getAttClassTypeSelectList() {
      const { data } = await getAttClassTypeSelectListApi()
      this.classTypeList = data
      // 默认选择第一个
      if(data.length > 0) {
        this.formData.seg1_type = data[0].pkey
        this.formData.seg2_type = data[0].pkey
        this.formData.seg3_type = data[0].pkey
      }
    },
     // 获取部门列表
     async getDepartmentList () {
      const { data } = await getDepartmentList()
      this.departmentList = data
      if(data && !this.isEdit) {
        this.formData.dep_id = data[0].pkey
      }
    },
  },
}
</script>

<style lang="less" scoped>
::v-deep .ant-form-item {
  margin-bottom: 10px;
}
</style>